<template>
  <div class="teaching">
    <el-container>
      <el-header style="background: #333">
        <div class="teaching-header">
          <Header
            :teachingCourse="teachingCourse"
            :activeCourse="activeCourse"
          />
        </div>
      </el-header>
      <el-container style="position: relative">
        <div
          :class="['sidebar-toggle-wrap', fold ? '' : 'fold']"
          @click="fold = !fold"
        >
          <span class="sidebar-toggle">
            <i
              :class="[fold ? 'el-icon-arrow-right' : 'el-icon-arrow-left']"
            ></i>
          </span>
        </div>
        <el-aside :width="fold ? '0px' : '260px'" style="background: #222">
          <div class="teaching-aside">
            <Aside :knowledgeList="knowledgeList" />
          </div>
        </el-aside>
        <el-main style="padding: 0">
          <div class="teaching-main">
            <div class="cont">
              <Main />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <ChatRoom :roomId="eduTeachingId" v-if="eduTeachingId" />
  </div>
</template>
<script>
import { eduTeachingCourseQuery } from '@/api/admin/teach/eduTeachingCourse.js'
import { sysKnowledgeQuery } from '@/api/admin/courseLibrary/sysKnowledge.js'
export default {
  components: {
    Header: () => import('./Header.vue'),
    Aside: () => import('./Aside.vue'),
    Main: () => import('./Main.vue'),
    ChatRoom: () => import('./ChatRoom.vue'),
  },
  data() {
    return {
      fold: false,
      teachingCourse: [],
      knowledgeList: [],
      activeCourse: {},
      eduTeachingId: undefined,
    }
  },
  mounted() {
    this.eduTeachingId = this.$route.query.id
    this.getTeachingList()
    this.$bus.$on('changeCourse', (item) => {
      this.activeCourse = item
      this.getKnowledgeList(item)
    })
  },
  beforeDestroy() {
    this.$bus.$off('changeCourse')
  },
  methods: {
    // 获取资源主题
    async getTeachingList() {
      let obj = {
        page: 1,
        limit: 999,
        eduTeachingId: this.$route.query.id,
      }
      let res = await eduTeachingCourseQuery(obj)
      this.teachingCourse = res.data.data
      if (this.teachingCourse.length == 0) return
      this.activeCourse = this.teachingCourse[0]
      this.getKnowledgeList(this.activeCourse)
    },
    // 获取知识点列表
    getKnowledgeList({ courseId, chapterId }) {
      let obj = {
        page: 1,
        limit: 999,
        courseId,
        chapterId,
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      sysKnowledgeQuery(obj).then((res) => {
        this.knowledgeList = res.data.data
        loading.close()
      })
    },
  },
}
</script>
<style scoped lang="scss">
.teaching {
  .teaching-header {
    height: 60px;
    line-height: 60px;
    color: #fff;
  }
  .teaching-aside {
    height: calc(100vh - 60px);
    background: #222;
  }
  .teaching-main {
    height: calc(100vh - 60px);
    padding: 20px 10px 10px 20px;
    background: #111;
    box-sizing: border-box;
    .cont {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
    }
  }
  .sidebar-toggle-wrap {
    position: absolute;
    top: 20px;
    left: 5px;
    width: 10px;
    height: calc(100vh - 80px);
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
    transition: background-color 0.2s, opacity 0.5s;
    cursor: pointer;
    &:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    &.fold {
      left: 260px;
    }
    .sidebar-toggle {
      position: absolute;
      top: 50%;
      left: -1px;
      width: 12px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 6px;
      color: #fff;
      background: #666;
      i {
        margin-left: -2px;
      }
    }
  }
}
</style>